<template>
  <page-wrap
    back
    title="结果详情"
    stayStill
    hide-tab
    :hideSafeArea="true"
    :bg-color="uNavColor"
  >
    <InterViewNavbg />
    <view class="styleMainContainer">
      <!-- 头部信息 -->
      <view class="styleScoreContainer">
        <view class="styleName">{{
          isFromIndex == 0 ? data.personName : zhituData.infoTitle
        }}</view>
        <view v-if="isFromIndex == 0" class="styleId">{{
          data.personPhone
        }}</view>

        <view class="styleTime"
          >面试时间：{{
            isFromIndex != 0
              ? zhituData.startTime
              : fromSxh
              ? zhituData.startTime
              : getMdate(data.interviewStartTime)
          }}</view
        >
        <view class="styleDuration"
          >面试时长：{{
            isFromIndex != 0
              ? zhituData.totalTimeStr
              : fromSxh
              ? zhituData.totalTimeStr
              : data.interviewTotalTime
          }}</view
        >
        <span class="styleScore"
          >{{
            isFromIndex != 0
              ? zhituData.score
              : fromSxh
              ? zhituData.score
              : data.score
          }}分</span
        >
      </view>

      <scroll-view
        class="scrollView"
        :style="{ height: scrollViewHeight + 'px' }"
        scroll-y
        enable-flex
      >
        <!-- 评价维度打分 -->
        <view class="styleGrid">
          <view
            class="styleGridItem"
            v-for="(item, index) in assessmentsList"
            :key="index"
          >
            <image class="styleGridItemBgImg" :src="item.blockImg"></image>
            <view class="styleGridItemView">
              <view class="styleGridItemContent">{{ item.name }}</view>
              <view class="styleGridItemScore"
                >{{ item.score
                }}<span class="styleGridItemScoreFen">分</span></view
              >
            </view>
          </view>
        </view>

        <!-- 综合评价 -->
        <view
          class="styleComprehensiveCommentContainer"
          v-if="comprehensiveAssessment.length > 0"
        >
          <view class="textTitle">
            <view class="titleFlag"></view><text>综合评价</text>
          </view>
          <view class="textContent">
            <view v-if="pointTags && pointTags.length > 0">
              <u-tag
                class="textTags"
                v-for="(item, index) in pointTags"
                :key="index"
                :text="item"
                type="primary"
              />
            </view>
            <CheckMore
              :content="comprehensiveAssessment"
              :contentSlice="75"
            ></CheckMore>
          </view>
        </view>

        <!-- 企业端 - 复试建议 -->
        <view
          v-if="
            isFromIndex == 0 &&
            (data.propose.length > 0 || data.question.length > 0)
          "
          class="styleComprehensiveCommentContainer"
        >
          <view class="textTitle">
            <view class="titleFlag"></view><text>复试建议</text>
          </view>
          <view class="textContent" v-if="data.propose.length > 0">
            <u-tag
              type="primary"
              text="复试考察建议"
              bg-color="#2D51F5"
              color="white"
            />
            <view v-for="(item, index) in data.propose" :key="index">{{
              item
            }}</view>
          </view>
          <view class="textContent" v-if="data.question.length > 0">
            <u-tag
              type="primary"
              text="复试问题参考"
              bg-color="#7548F6"
              color="white"
            />
            <view v-for="(item, index) in data.question" :key="index">{{
              item
            }}</view>
          </view>
        </view>
        <view
          v-else-if="zhituData.suggestion.length > 0"
          class="styleComprehensiveCommentContainer"
        >
          <view class="textTitle">
            <view class="titleFlag"></view><text>提升建议</text>
          </view>
          <view class="textContent">
            <view v-for="(item, index) in zhituData.suggestion" :key="index">{{
              item
            }}</view>
          </view>
        </view>

        <!-- 多维度评价 -->
        <view
          v-if="isFromIndex == 0 || isFromIndex == 1"
          class="multi-dimension-container"
        >
          <view class="text-title">
            <view class="title-flag"></view><text>多维评价</text>
          </view>
          <view
            class="item-milti-dimension"
            v-for="(item, index) in assessmentsList"
            :key="index"
          >
            <view class="img-container">
              <image class="img-dimension" :src="item.tagImg" />
            </view>
            <view class="comment-container">
              <CheckMore
                class="style-comment-content"
                :content="item.assessment"
                :contentSlice="75"
              >
              </CheckMore>
            </view>
          </view>
        </view>

        <!-- 企业端 - 作答评价-->
        <view v-if="isFromIndex == 0" class="styleQuestionAnswerContainer">
          <view class="textTitle">
            <view class="titleFlag"></view><text>作答评价</text>
          </view>
          <view v-for="(item, index) in data.questionResultVOs" :key="index">
            <view class="styleQuestionAnswerItem">
              <view class="styleQuestion">
                <span class="styleQuestionTag">问题</span>
                <span class="styleQuestionContent">{{
                  item.questionTitle
                }}</span>
              </view>
              <view class="styleAnswer">
                <span class="styleAnswerTag">面试者回答</span>
                <CheckMore
                  class="styleAnswerContent"
                  :content="
                    item.answerWord ? item.answerWord : '没有回答该问题'
                  "
                  :contentSlice="75"
                >
                </CheckMore>
              </view>
              <view
                class="styleViewAnswerContainer"
                @click="playVideoAction(item)"
                ><span class="styleViewAnswer">查看面试视频 ></span></view
              >
              <view class="styleComment">
                <span class="styleCommentTagContainer">
                  <span class="styleCommentTag">评价</span>
                  <span class="styleCommentScore">{{ item.score }}分</span>
                </span>
                <CheckMore
                  class="styleCommentContent"
                  :content="item.assessment"
                  :contentSlice="75"
                >
                </CheckMore>
              </view>
            </view>
            <view class="styleViewAnswerContainer" @click="goToViewAnswer(item)"
              ><span class="styleViewAnswer">参考答案 ></span></view
            >
            <view
              class="styleViewLine"
              v-if="index != data.questionResultVOs.length - 1"
            ></view>
          </view>
        </view>
        <!-- 职途 - 作答评价-->
        <view v-else class="styleQuestionAnswerContainer">
          <view class="textTitle">
            <view class="titleFlag"></view><text>作答评价</text>
          </view>
          <view v-for="(item, index) in zhituData.detailList" :key="index">
            <view class="styleQuestionAnswerItem">
              <view class="styleQuestion">
                <span class="styleQuestionTag">问题</span>
                <span class="styleQuestionContent">{{
                  item.questionTitle
                }}</span>
              </view>
              <view class="styleAnswer">
                <span class="styleAnswerTag">面试者回答</span>
                <CheckMore
                  class="styleAnswerContent"
                  :content="item.answer ? item.answer : '没有回答该问题'"
                  :contentSlice="75"
                >
                </CheckMore>
              </view>
              <view class="styleComment">
                <span class="styleCommentTagContainer">
                  <span class="styleCommentTag">评价</span>
                  <span class="styleCommentScore">{{ item.score }}分</span>
                </span>
                <CheckMore
                  class="styleCommentContent"
                  :content="item.assessment"
                  :contentSlice="75"
                >
                </CheckMore>
              </view>
            </view>
            <view
              class="styleViewAnswerContainer"
              @click="goToViewZhituAnswer(item)"
              ><span class="styleViewAnswer">参考答案 ></span></view
            >
            <view
              class="styleViewLine"
              v-if="index != zhituData.detailList.length - 1"
            ></view>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 标准答案 -->
    <u-popup v-model="answerShow" mode="bottom" height="60%" border-radius="14">
      <view class="answer-content">
        <view class="font-bold">题目</view>
        <view class="answer-text">{{ objAnswer.questionTitle }}</view>
        <view class="font-bold">参考答案</view>
        <view class="answer-text answer-padding">{{
          objAnswer.questionStandardAnswer
        }}</view>
      </view>
    </u-popup>

    <!-- 企业端 - 视频播放器-->
    <view v-if="isFromIndex == 0" v-show="showVideo" class="videoArea">
      <video
        id="myVideo"
        :src="src"
        style="width: 100%; height: 300px"
        loop
        :autoplay="false"
        :controls="true"
        :show-center-play-btn="true"
        :show-progress="true"
      ></video>
      <button class="icon-close" @click="colseVideo"></button>
    </view>
    <view class="fixedButtons" v-if="fromSxh">
      <view class="return-sxh-home" @click="returnSxhHome">返回首页</view>
    </view>
  </page-wrap>
</template>
<script>
import common from '@/api/common.js';
import CheckMore from '../components/checkMore.vue';
import {
  getCompanyInterviewResul,
  reqZhituGetResult
} from '@/api/modules/company';
import InterViewNavbg from './components/InterViewNavbg.vue';
import PositionFollowPromptBox from '../../career/components/PositionFollowPromptBox.vue';
export default {
  components: {
    CheckMore,
    InterViewNavbg
  },
  data() {
    return {
      fromSxh: false, // 判断是不是双选会结果入口
      // 接口分两类：企业 or C端
      isFromIndex: 0, // 0=企业HR，1=C端招聘会人才，2=C端职途学生，
      zhituData: {},

      showVideo: false,
      videoContext: undefined,
      src: '',
      inputValue: '',
      // 屏幕宽高
      winWidth: '0',
      winHeight: '0',

      answerShow: false,
      objId: '',
      objAnswer: {},
      data: {},
      scrollViewHeight: 1,
      assessmentsList: [
        // {
        //   modelDimensions: "知识",
        //   score: "1",
        //   assessment:
        //     "这个是知识这个是知识这个是知识这个是知识这个是知识这个是知识这个是知识这个是知识这个是知识",
        //   blockImg:
        //     this.$imgBaseSelf + "aiInterview/result/grid_block_knowledge.png",
        //   tagImg:
        //     this.$imgBaseSelf +
        //     "aiInterview/result/interview_result_knowledge.webp",
        //   name: "知识",
        // },
        // {
        //   modelDimensions: "特质",
        //   score: "2",
        //   assessment:
        //     "这个是特质这个是特质这个是特质这个是特质这个是特质这个是特质这个是特质这个是特质这个是特质",
        //   blockImg:
        //     this.$imgBaseSelf + "aiInterview/result/grid_block_knowledge.png",
        //   tagImg:
        //     this.$imgBaseSelf +
        //     "aiInterview/result/interview_result_knowledge.webp",
        //   name: "知识",
        // },
        // {
        //   modelDimensions: "技能",
        //   score: "3",
        //   assessment:
        //     "这个是技能这个是技能这个是技能这个是技能这个是技能这个是技能这个是技能这个是技能这个是技能",
        //   blockImg:
        //     this.$imgBaseSelf + "aiInterview/result/grid_block_knowledge.png",
        //   tagImg:
        //     this.$imgBaseSelf +
        //     "aiInterview/result/interview_result_knowledge.webp",
        //   name: "知识",
        // },
        // {
        //   modelDimensions: "动机",
        //   score: "4",
        //   assessment:
        //     "这个是动机这个是动机这个是动机这个是动机这个是动机这个是动机这个是动机这个是动机这个是动机",
        //   blockImg:
        //     this.$imgBaseSelf + "aiInterview/result/grid_block_knowledge.png",
        //   tagImg:
        //     this.$imgBaseSelf +
        //     "aiInterview/result/interview_result_knowledge.webp",
        //   name: "知识",
        // },
        // {
        //   modelDimensions: "能力",
        //   score: "5",
        //   assessment:
        //     "这个是能力这个是能力这个是能力这个是能力这个是能力这个是能力这个是能力这个是能力这个是能力",
        //   blockImg:
        //     this.$imgBaseSelf + "aiInterview/result/grid_block_knowledge.png",
        //   tagImg:
        //     this.$imgBaseSelf +
        //     "aiInterview/result/interview_result_knowledge.webp",
        //   name: "知识",
        // },
        // {
        //   modelDimensions: "价值观",
        //   score: "6",
        //   assessment: "这个是价值观",
        //   blockImg:
        //     this.$imgBaseSelf + "aiInterview/result/grid_block_knowledge.png",
        //   tagImg:
        //     this.$imgBaseSelf +
        //     "aiInterview/result/interview_result_knowledge.webp",
        //   name: "知识",
        // },
      ],
      pointTags: [],
      comprehensiveAssessment: ''
    };
  },

  created() {
    this.videoContext = uni.createVideoContext('myVideo');
    // let wW = uni.getSystemInfoSync().windowWidth;
    // let wH = uni.getSystemInfoSync().windowHeight;
    // this.winWidth = `${wW}px`;
    // // this.winHeight = `${wH}px`;
    // this.winHeight = `400px`;
    // console.log("🚀 ~ created ~ winHeight:", this.winHeight)

    // 724
  },

  onLoad(options) {
    console.log('🚀 ~ onLoad111222 ~ options:', options);
    this.objId = options.objId;
    if (options.fromSxh == 'sxh') {
      this.fromSxh = true;
      this.isFromIndex = 2;
    }
    if (options.from) {
      if (options.from == 'zph') {
        this.isFromIndex = 1;
      } else if (options.from == 'zhitu') {
        this.isFromIndex = 2;
      }
      this.getZhituData();
    } else {
      if (this.fromSxh) {
        this.getZhituData();
      } else {
        this.getData();
      }
    }

    let idx = this.isFromIndex;
    wx.reportEvent('ai_result_detail', {
      come_from: idx == 0 ? '企业邀请面试' : (idx = 2 ? '职途' : '其它')
    });
  },
  onUnload() {
    this.colseVideo();
  },

  mounted() {
    const { screenHeight } = uni.getSystemInfoSync();
    uni
      .createSelectorQuery()
      .in(this)
      .select('.styleScoreContainer')
      .boundingClientRect((rect) => {
        console.log('---header位置信息rect', rect);
        this.scrollViewHeight =
          screenHeight - rect.bottom - 50 - uni.upx2px(10);
      })
      .exec();
  },
  methods: {
    returnSxhHome() {
      uni.reLaunch({ url: '/pagesSub/doubleChannelChoosingMeeting/index' });
    },
    getMdate(date) {
      return common.getMinuteTime(date);
    },
    getFilterBrTagText(content) {
      console.log('getFilterBrTagText');
      return content.replace(/<br>/g, '\n');
    },
    goToViewAnswer(item) {
      this.objAnswer = item;
      this.answerShow = true;
    },
    goToViewZhituAnswer(item) {
      this.objAnswer = {
        questionTitle: item.questionTitle,
        questionStandardAnswer: item.standardAnswer
      };
      this.answerShow = true;
    },

    // 解析面试评价结果
    parseAssessmentsList(assessments) {
      var result = [];
      if (assessments == undefined || assessments.length == 0) {
        return result;
      }
      var length = assessments.length;
      for (var i = 0; i < length; i++) {
        var item = assessments[i];
        var resultItem = {
          modelDimensions: item.modelDimensions,
          score: item.score,
          assessment: item.assessment,
          name: item.modelDimensions,
          blockImg: '',
          tagImg: ''
        };
        if (item.modelDimensions == '知识') {
          resultItem.blockImg =
            this.$imgBaseSelf + 'aiInterview/result/grid_block_knowledge.png';
          resultItem.tagImg =
            this.$imgBaseSelf +
            'aiInterview/result/interview_result_knowledge.webp';
        } else if (item.modelDimensions == '特质') {
          resultItem.blockImg =
            this.$imgBaseSelf + 'aiInterview/result/grid_block_traits.png';
          resultItem.tagImg =
            this.$imgBaseSelf +
            'aiInterview/result/interview_result_traits.webp';
        } else if (item.modelDimensions == '技能') {
          resultItem.blockImg =
            this.$imgBaseSelf + 'aiInterview/result/grid_block_skill.png';
          resultItem.tagImg =
            this.$imgBaseSelf +
            'aiInterview/result/interview_result_skill.webp';
        } else if (item.modelDimensions == '动机') {
          resultItem.blockImg =
            this.$imgBaseSelf + 'aiInterview/result/grid_block_motivation.png';
          resultItem.tagImg =
            this.$imgBaseSelf +
            'aiInterview/result/interview_result_motivation.webp';
        } else if (item.modelDimensions == '能力') {
          resultItem.blockImg =
            this.$imgBaseSelf + 'aiInterview/result/grid_block_ability.png';
          resultItem.tagImg =
            this.$imgBaseSelf +
            'aiInterview/result/interview_result_ability.webp';
        } else if (item.modelDimensions == '价值观') {
          resultItem.blockImg =
            this.$imgBaseSelf + 'aiInterview/result/grid_block_values.png';
          resultItem.tagImg =
            this.$imgBaseSelf +
            'aiInterview/result/interview_result_values.webp';
        }
        result.push(resultItem);
      }

      return result;
    },
    getData() {
      let param = {
        interviewInfoId: this.objId
      };
      getCompanyInterviewResul(param).then((res) => {
        console.log('🚀 ~ 页面数据 ~ res:', res);
        if (res && res.code === 200) {
          this.data = res.data;
          this.comprehensiveAssessment = res.data.comprehensiveAssessment;
          if (Array.isArray(res.data.keyTags)) {
            this.pointTags = res.data.keyTags;
          }
          // 解析正式数据
          this.assessmentsList = this.parseAssessmentsList(
            res.data.assessments
          );
          //this.assessmentsList = this.parseAssessmentsList(this.assessmentsList);
        } else {
          uni.showToast({
            title: res.status_desc,
            icon: 'none'
          });
        }
      });
    },
    getZhituData() {
      let param = {
        recordId: this.objId
      };
      reqZhituGetResult(param).then((res) => {
        console.log('🚀 ~ 页面数据.vue:348 ~ res:', res);
        if (res && res.code === 200) {
          this.zhituData = res.data;
          this.comprehensiveAssessment = res.data.comprehensiveAssessment;
          if (Array.isArray(res.data.keyTags)) {
            this.pointTags = res.data.keyTags;
          }
          this.assessmentsList = this.parseAssessmentsList(
            res.data.assessments
          );
        } else {
          uni.showToast({
            title: res.status_desc,
            icon: 'none'
          });
        }
      });
    },
    playVideoAction(item) {
      console.log('🚀 ~ playVideoAction ~ item:', item);
      if (this.showVideo) {
        this.videoContext.stop();
      } else {
        this.showVideo = true;
      }

      if (this.isFromIndex == 0) {
        if (item.answerVideoUrl) {
          this.src = item.answerVideoUrl;
        } else {
          uni.showToast({
            title: '-视频生成中-',
            icon: 'none'
          });
        }
      } else {
        if (item.videoUrl) {
          this.src = item.videoUrl;
        } else {
          uni.showToast({
            title: '-视频生成中-',
            icon: 'none'
          });
        }
      }
      // this.videoContext.play();
      // this.src = "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/wap2appvsnative.mp4";
    },
    colseVideo() {
      this.showVideo = false;
      this.videoContext.stop();
    },
    videoErrorCallback: function (e) {
      console.log('---视频错误信息:' + e.target.errMsg);
    }
  }
};
</script>
<style lang="scss" scoped>
.fixedButtons {
  z-index: 999;
  // width: calc(100vw - 64rpx);
  position: fixed;
  display: flex;
  justify-content: space-between;
  bottom: 40rpx;
  width: 100vw;
  margin: 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  .return-sxh-home {
    width: 680rpx;
    height: 96rpx;
    background: #ff711e;
    border-radius: 200rpx;
    color: #ffffff;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    font-size: 32rpx;
    color: #ffffff;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}
.videoArea {
  width: 100%;
  height: calc(100vw * 7 / 9);
  position: absolute;
}

.top {
  position: fixed;
  top: 0;
  width: 100%;
  height: 20%;
  z-index: -1;
  background: linear-gradient(360deg, #f7f8fa 0%, #ffddcc 100%);
}

.scrollView {
  box-sizing: border-box;
  // height: calc(100vh - 340rpx);
  margin-top: 10rpx;
}

.styleMainContainer {
  padding-left: 32rpx;
  padding-right: 32rpx;
  // background-color: #F7F8FA;
  // background: linear-gradient(360deg, #F7F8FA 0%, #FFE9E0 100%);
  // background: transparent;
  background-color: transparent;
  display: flex;
  flex-direction: column;

  .styleScoreContainer {
    position: relative;
    margin-top: 16rpx;
    background-color: #ffffff;
    border-radius: 24rpx;
    padding: 32rpx;

    .styleName {
      color: #222222;
      font-size: 40rpx;
      line-height: 56rpx;
      font-weight: 800;
    }

    .styleId {
      margin-top: 4rpx;
      font-size: 32rpx;
      line-height: 36rpx;
      font-weight: 400;
    }

    .styleTime {
      font-size: 26rpx;
      font-weight: 400;
      color: #999999;
      line-height: 32rpx;
      margin-top: 20rpx;
    }

    .styleDuration {
      font-weight: 400;
      color: #999999;
      line-height: 32rpx;
      font-size: 26rpx;
    }

    .styleScore {
      position: absolute;
      right: 30rpx;
      top: 46rpx;
      font-weight: 600;
      color: #f75a3e;
      line-height: 30rpx;
      font-size: 36rpx;
    }
  }

  .styleGrid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 24rpx;

    .styleGridItem {
      flex: 0 0 32%;
      height: 124rpx;
      background-color: aqua;
      margin-right: calc(4% / 3);
      margin-bottom: calc(4% / 3);
      border-radius: 20rpx;
      position: relative;

      .styleGridItemView {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }

      .styleGridItemBgImg {
        width: 100%;
        height: 100%;
        z-index: -1;
      }

      .styleGridItemContent {
        font-weight: bold;
        color: #ffffff;
        line-height: 36rpx;
        font-size: 28rpx;
        margin-top: 16rpx;
        margin-left: 16rpx;
      }

      .styleGridItemScore {
        font-weight: 800;
        color: #ffffff;
        line-height: 36rpx;
        font-size: 36rpx;
        margin-left: 16rpx;
        margin-top: 16rpx;

        .styleGridItemScoreFen {
          color: white;
          font-size: 20rpx;
          line-height: 36rpx;
          padding-left: 16rpx;
        }
      }
    }

    .styleGridItem:nth-child(3n) {
      margin-right: 0;
    }

    /*使最后一个元素的边距填满剩余空间 */
    .styleGridItem:last-child {
      margin-right: auto;
    }

    .styleGridItem:nth-last-child(-n + 3) {
      margin-bottom: 0;
    }
  }

  .styleComprehensiveCommentContainer {
    padding: 32rpx 44rpx;
    background: #ffffff;
    border-radius: 24rpx;
    margin-top: 24rpx;

    .textTitle {
      display: flex;
      align-items: center;
      font-size: 32rpx;
      font-family: PingFang-SC-Heavy, PingFang-SC;
      font-weight: 800;
      color: #222222;
      line-height: 44rpx;

      .titleFlag {
        width: 8rpx;
        height: 36rpx;
        border-radius: 64rpx;
        background-color: #f75a3e;
        margin-right: 16rpx;
      }
    }

    .textContent {
      margin-top: 26rpx;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #555555;
      line-height: 48rpx;
      white-space: pre-wrap;
      overflow: hidden;

      .textTags {
        margin-right: 20rpx;
      }
    }
  }

  .multi-dimension-container {
    background-color: white;
    border-radius: 24rpx;
    padding-top: 38rpx;
    margin-top: 30rpx;

    .text-title {
      margin-left: 32rpx;
      display: flex;
      align-items: center;
      font-size: 32rpx;
      font-family: PingFang-SC-Heavy, PingFang-SC;
      font-weight: 800;
      color: #222222;
      line-height: 44rpx;
      margin-bottom: 28rpx;

      .title-flag {
        width: 8rpx;
        height: 36rpx;
        border-radius: 64rpx;
        background-color: #f75a3e;
        margin-right: 16rpx;
      }
    }

    .item-milti-dimension {
      padding-bottom: 44rpx;

      .img-container {
        .img-dimension {
          width: 130rpx;
          height: 44rpx;
        }
      }

      .comment-container {
        margin-top: 20rpx;
        margin-left: 32rpx;
        margin-right: 32rpx;

        .style-comment-content {
        }
      }
    }
  }

  .styleQuestionAnswerContainer {
    background: #ffffff;
    border-radius: 24rpx;
    padding-left: 32rpx;
    padding-right: 32rpx;
    padding-top: 36rpx;
    margin-bottom: 74rpx;
    padding-bottom: 60rpx;
    display: flex;
    flex-direction: column;

    .textTitle {
      display: flex;
      align-items: center;
      font-size: 32rpx;
      font-family: PingFang-SC-Heavy, PingFang-SC;
      font-weight: 800;
      color: #222222;
      line-height: 44rpx;

      .titleFlag {
        width: 8rpx;
        height: 36rpx;
        border-radius: 64rpx;
        background-color: #f75a3e;
        margin-right: 16rpx;
      }
    }

    .styleQuestionAnswerItem {
      .styleQuestion {
        margin-top: 30rpx;

        .styleQuestionTag {
          background-color: #e1ddff;
          color: #675db0;
          padding-left: 20rpx;
          padding-right: 20rpx;
          border-radius: 10rpx;
          padding-top: 6rpx;
          padding-bottom: 6rpx;
          font-size: 24rpx;
        }

        .styleQuestionContent {
          font-size: 32rpx;
          color: #222222;
          line-height: 56rpx;
          margin-left: 20rpx;
          font-weight: bold;
        }
      }

      .styleAnswer {
        margin-top: 36rpx;

        .styleAnswerTag {
          background-color: #d9f9f2;
          color: #328d79;
          padding-left: 20rpx;
          padding-right: 20rpx;
          border-radius: 10rpx;
          padding-top: 6rpx;
          padding-bottom: 6rpx;
          font-size: 24rpx;
        }

        .styleAnswerContent {
          margin-left: 20rpx;
        }
      }

      .styleComment {
        margin-top: 36rpx;

        .styleCommentTagContainer {
          .styleCommentTag {
            background-color: #ffece8;
            color: #f75a3e;
            padding-left: 20rpx;
            padding-right: 20rpx;
            border-radius: 10rpx;
            padding-top: 6rpx;
            padding-bottom: 6rpx;
            font-size: 24rpx;
            vertical-align: middle;
          }

          .styleCommentScore {
            font-weight: bold;
            color: #f75e43;
            line-height: 48rpx;
            font-size: 36rpx;
            margin-left: 16rpx;
            vertical-align: middle;
          }
        }

        .styleCommentContent {
          margin-left: 20rpx;
        }
      }
    }

    .styleViewAnswerContainer {
      margin-top: 24rpx;
      display: flex;
      justify-content: center;

      .styleViewAnswer {
        font-weight: 400;
        color: #999999;
        line-height: 36rpx;
        font-size: 26rpx;
      }
    }

    .styleViewLine {
      height: 2rpx;
      border: 2rpx solid #ededed;
      margin-top: 32rpx;
    }
  }
}

.answer-content {
  margin: 64rpx 32rpx;

  .font-bold {
    font-weight: bold;
    font-size: 36rpx;
    margin-top: 64rpx;
    margin-bottom: 24rpx;
    color: #222222;
  }

  .answer-text {
    color: #222222;
    font-size: 30rpx;
  }

  .answer-padding {
    padding-bottom: 90rpx;
  }
}
.icon-close {
  background-image: url($img-base + 'career/delete.png');
  background-size: 100% 100%;
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  top: 10rpx;
  right: 10rpx;
  background-color: black;
}
</style>
